<template>
    <div class="editPassword">
        <div class="header">
            <van-nav-bar title="修改密码" left-text="" left-arrow @click-left="router.back()" />
        </div>
        <div class="content">
            <p class="title">修改密码</p>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field :type="usedPasswordFlag ? 'password' : 'text'" name="usedPassword" label=""
                        v-model="queryParams.usedPassword" placeholder="请输入旧密码" required :rules="[
                            { required: true, trigger: 'onBlur', message: '请输入旧密码' },
                            {
                                validator: correctPassword,
                                message: '请输入6到16位包含英文，数字，符号的密码',
                            },
                        ]">
                        <template #right-icon>
                            <img class="icons" :src="usedPasswordFlag ? zhengyan : biyan" alt=""
                                @click="usedPasswordFlag = !usedPasswordFlag">
                        </template>
                    </van-field>
                </van-cell-group>
                <div class="borderd"></div>
                <van-cell-group inset>
                    <van-field :type="newPasswordFlag ? 'password' : 'text'" name="newPassword" label=""
                        v-model="queryParams.newPassword" placeholder="请输入新密码" required :rules="[
                            { required: true, trigger: 'onBlur', message: '请输入新密码' },
                            {
                                validator: correctPassword,
                                message: '请输入6到16位包含英文，数字，符号的密码',
                            },
                            {
                                validator: repeatPassword,
                                message: '与原密码相同',
                            }
                        ]">
                        <template #right-icon>
                            <img class="icons" :src="newPasswordFlag ? zhengyan : biyan" alt=""
                                @click="newPasswordFlag = !newPasswordFlag">
                        </template>
                    </van-field>
                </van-cell-group>
                <div class="borderd"></div>
                <van-cell-group inset>
                    <van-field :type="confirmPasswordFlag ? 'password' : 'text'" name="confirmPassword" label=""
                        v-model="queryParams.confirmPassword" placeholder="确认密码" required :rules="[
                            { required: true, trigger: 'onBlur', message: '请输入密码' },
                            {
                                validator: valiConfirmPassword,
                                message: '两次密码不一致',
                            },
                        ]">
                        <template #right-icon>
                            <img class="icons" :src="confirmPasswordFlag ? zhengyan : biyan" alt=""
                                @click="confirmPasswordFlag = !confirmPasswordFlag">
                        </template>
                    </van-field>
                </van-cell-group>
                <div class="borderd"></div>
                <van-button round block :loading="loading"  loading-text="执行中..."   type="primary" native-type="submit" v-throttle:click>
                    确定 
                </van-button>
            </van-form>
        </div>

    </div>
</template>
<script setup lang="ts">
import { showSuccessToast,showFailToast } from 'vant';
import { ref } from 'vue';
import { updatePassword, apiLogout } from '@/api/loginApi'
import { loginStore } from "@/store/login";
import { useRouter } from "vue-router";
const zhengyan = new URL("@/assets/productHome/icon_zhengyan.png", import.meta.url).href;
const biyan = new URL("@/assets/productHome/icon_biyan.png", import.meta.url).href;
const login = loginStore();
const router = useRouter();
const queryParams = ref({
    usedPassword: "",
    newPassword: "",
    confirmPassword: ""
})
// 旧密码标识
const usedPasswordFlag = ref(true)
// 新密码标识
const newPasswordFlag = ref(true)
// 确认密码标识
const confirmPasswordFlag = ref(true)

const loading = ref(false)

// 密码格式验证
const correctPassword = (val) => /^[0-9a-zA-Z!@#$%^&*(),.?":{}|<>]{6,16}$/.test(val)
// 确认密码验证
const valiConfirmPassword = (val) => {
    if (val && queryParams.value.newPassword == val) {
        return true
    } else {
        return false
    }
}
// 与原密码比较验证
const repeatPassword = (val) => {
    if (val && queryParams.value.usedPassword !== val) {
        return true
    } else {
        return false
    }
}

const onSubmit = async () => {
    loading.value = true
    try{
        await updatePassword({ oldPassword: queryParams.value.usedPassword, newPassword: queryParams.value.newPassword })
        showSuccessToast('修改密码成功')
        loading.value = false
        setTimeout(async () => {
            await apiLogout();
            login.resetToken();
            location.href = "/login";
        }, 1000)
    }catch (error) {
        if(error=='timeout'){
        showFailToast('修改密码失败');
        }
        loading.value = false
    }
}
</script>
<style lang="less" scoped>
.editPassword {
    background: #FFFFFF;
    box-sizing: border-box;
    letter-spacing: 1px;
    width: 100%;
    height: 100vh;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .content{
        width: 100%;
        height: calc(100vh - 90px);
        padding: 50px 25px;
        box-sizing: border-box;
    }

    .title {
        font-weight: 600;
        font-size: 21px;
        color: #1A1B1C;
        margin-bottom: 80px;
    }

    :deep(.van-cell-group--inset) {
        margin: 0 !important;
    }

    :deep(.van-cell) {
        padding: 0 !important;
    }

    :deep(.van-field__right-icon) {
        display: flex;
        align-items: center;
    }

    .icons {
        width: 20px;
        height: 20px;
    }

    .borderd {
        border: 1px solid #EDEDED;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    :deep(.van-button) {
        width: 225px;
        height: 48px;
        background: #0094FF;
        border-radius: 5px;
        text-align: center;
        line-height: 48px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        margin: 100px auto;
    }
}
</style>